<template>
	<view>
		<daya-clone-navbar :prop_clone_navbar="clone_navbar" :prop_is_ipx="is_ipx" />
		<u-navbar title="热门" @leftClick="leftClick">
		</u-navbar>
		<view @tap="mask1Cancel":style="{top: top + 40 + 'px'}" :class="'mask ' + (mask1Hidden ? '' : 'maskactive ')">
			<view class="maskbody">
				<!-- parse <template is="sort_list" :data="selected:selected,sortSelected:sortSelected,issx:issx,mask1Hidden:mask1Hidden"></template> -->
				<!-- <block name="sort_list">
					<view class="sort-list">
						<view @tap="onOverallTag" :class="'sort ' + (selected == 0 ? 'sort-active' : '')">
							<view>{{ sortSelectedXX }}</view>
							<image :class="mask1Hidden ? 'sortimg' : 'sortimg1'"
								src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
						</view>
						<view @tap="onTapTag" :class="'sort ' + (selected == 1 ? 'sort-active' : '')" data-index="1">距离最近</view>
						<view @tap="onTapTag" :class="'sort ' + (selected == 2 ? 'sort-active' : '')" data-index="2">好评优先</view>
						<view @tap="onFilter" :class="'sort ' + (issx ? 'sort-active' : 'sort-active2')">
							<view>筛选</view>
							<image class="sortimg" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/screen.png"></image>
						</view>
					</view>
				</block> -->
				<view class="overall-sort-list">
					<view @tap="sortSelectedFun" class="overall-sort" data-index="0" :data-sortindex="index"
						v-for="(item, index) in sortList" :key="index">{{ item.sort }}</view>
				</view>
			</view>
		</view>
		<view @tap="mask2Cancel" :style="{top: top + 40 + 'px'}" :class="'mask ' + (mask2Hidden ? '' : 'maskactive')">
			<view class="maskbody">
				<!-- parse <template is="sort_list" :data="selected:selected,sortSelected:sortSelected,issx:issx,mask1Hidden:mask1Hidden"></template> -->
				<!-- <block name="sort_list">
					<view class="sort-list">
						<view @tap="onOverallTag" :class="'sort ' + (selected == 0 ? 'sort-active' : '')">
							<view>{{ sortSelectedXX }}</view>
							<image :class="mask1Hidden ? 'sortimg' : 'sortimg1'"
								src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down1.png"></image>
						</view>
						<view @tap="onTapTag" :class="'sort ' + (selected == 1 ? 'sort-active' : '')" data-index="1">距离最近</view>
						<view @tap="onTapTag" :class="'sort ' + (selected == 2 ? 'sort-active' : '')" data-index="2">好评优先</view>
						<view @tap="onFilter" :class="'sort ' + (issx ? 'sort-active' : 'sort-active2')">
							<view>筛选</view>
							<image class="sortimg" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/screen.png"></image>
						</view>
					</view>
				</block> -->
				<scroll-view class="filterList" :scrollY="true">
					<view class="filterList-characteristic-title">商家特色</view>
					<view class="filterList-characteristic-items">
						<view @tap.stop.prevent="characteristicSelectedFun"
							:class="'filterList-characteristic-item ' + (characteristicSelected[index] == true ? 'characteristic-selected' : '')"
							:data-index="index" :data-name="item.text" v-for="(item, index) in characteristicList" :key="index">
							{{ item.text }}
						</view>
					</view>
					<view class="filterList-discount-title">优惠活动</view>
					<view class="filterList-discount-items">
						<view @tap.stop.prevent="discountSelectedFun"
							:class="'filterList-discount-item ' + (discountSelected == index ? 'discount-selected' : '')"
							:data-index="index" v-for="(item, index) in discountList" :key="index">
							<!-- <text class="filterList-discount-item-icon" :style="'background:' + item.iconColor">{{ item.icon }}</text> -->

							{{ item.text }}
						</view>
					</view>
				</scroll-view>
				<view class="filterList-footer">
					<view @tap.stop.prevent="clearSelectedNumb" class="filterList-footer-delect">清除</view>
					<view @tap="finish" class="filterList-footer-finish" v-if="selectedNumb != 0">
						完成
						<view class="filterList-footer-finish-number" v-if="selectedNumb != 0">{{ selectedNumb }}</view>
					</view>
					<view class="filterList-footer-finish" style="background: #efeff4" v-else>完成</view>
				</view>
			</view>
		</view>


		<view class="main" :style="{paddingTop: top + 'px'}">
			<view class="tjsj">
				<!-- parse <template is="sort_list" :data="selected:selected,sortSelected:sortSelected,issx:issx,mask1Hidden:mask1Hidden"></template> -->
				<!-- v-if="mask1Hidden==true && mask2Hidden==true" -->
				<block name="sort_list">
					<view class="sort-list">
						<view @tap="onOverallTag" :class="'sort ' + (selected == 0 ? 'sort-active' : '')">
							<view>{{ sortSelectedXX }}</view>
							<image :class="mask1Hidden ? 'sortimg' : 'sortimg1'" src="/static/ymq_canyino2o/arrow-bottom.png"
								style="width: 14rpx;height: 10rpx;"></image>
						</view>
						<view @tap="onTapTag" :class="'sort ' + (selected == 1 ? 'sort-active' : '')" data-index="1">距离最近</view>
						<view @tap="onTapTag" :class="'sort ' + (selected == 2 ? 'sort-active' : '')" data-index="2">好评优先</view>
						<view @tap="onFilter" :class="'sort ' + (issx ? 'sort-active' : 'sort-active2')">
							<view>筛选</view>
							<image :class="mask2Hidden ? 'sortimg' : 'sortimg1'" src="/static/ymq_canyino2o/arrow-bottom.png"
								style="width: 14rpx;height: 10rpx;"></image>
						</view>

					</view>
				</block>

				<view @tap="tzsjxq" :class="'sjlb flex-row ' + (item.is_yy == 2 && mdxx.isyykg == 1 ? 'bszz' : '')"
					:data-sjid="item.id" v-if="item.aa1 != NaN" v-for="(item, index) in storelist" :key="index">
					<view class="sjleft flex-grow-0">
						<image class="sjleftimg" :src="item.logo"></image>
						<view class="xzhiding" v-if="item.is_brand == '1'">品牌</view>
					</view>

					<view class="sjright flex-grow-1 flex-col">
						<view class="sjright1 flex-row flex-y-center">
							<view class="sjright1-l gobyndsingle">{{ item.name }}</view>
							<view class="isyy" v-if="item.is_yy == 2 && mdxx.isyykg == 1">休息中</view>
						</view>
						<view class="sjright2 flex-bet flex-y-center">
							<view class="flex-row flex-grow-1 flex-y-center">
								<!-- <view class="pingjia_fenshu3">
									<view class="kximg">
										<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/i-star.png"></image>
									</view>
									<view class="sximg" :style="'width: ' + item.sales * 20 + '%'">
										<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/i-stars.png"></image>
									</view>
								</view> -->
								<view class="pingfen">{{ item.sales }}</view>
								<view class="recommed_midel">月售{{ item.score }}+</view>
							</view>
							<view class="sjright2-r flex-grow-0 flex-row flex-y-center" v-if="item.is_ps == '1'">
								<view class="sjright2-text" v-if="item.ps_mode">{{ item.ps_mode }}</view>
								<view class="sjright2-text">准时达</view>
							</view>
						</view>
						<view class="sjright3 flex-bet flex-y-center">
							<view class="flex-row flex-y-center">
								<view class="sjright3text" style="padding-left: 0" v-if="item.is_ps == '1'">起送￥{{ item.start_at }}
								</view>
								<view class="sjright3text" style="border-right: 0" v-if="item.is_ps == '1'">配送￥{{ item.ps_money }}起
								</view>
								<view class="sjright3text" style="border-right: 0" v-if="item.is_ps != '1'">人均￥{{ item.capita }}/人
								</view>
							</view>
							<view class="flex-row flex-y-center">
								<view class="sjright3text" style="border-right: 0; padding-right: 0" v-if="item.is_ps == '1'">
									{{ item.ps_time }}
								</view>
								<view class="sjright3text" style="border-right: 0;" v-if="item.is_ps != '1'">离你{{ item.aa }}</view>
								<view class="sjright3text" style="border-right: 0;" v-if="item.is_ps == '1'">{{ item.aa }}</view>

							</view>
						</view>
						<view class="sjright4" v-if="item.mj.length > 0 && item.xyh_open == '1'">
							<view class="sjright4-l flex-grow-1" v-if="item.mj.length > 0">
								<view class="flex-row">
									<view class="mj">减</view>
									<view class="gobyndsingle">
										<text v-for="(i, index1) in item.mj" :key="index1">满{{ i.full }}减{{ i.reduction }},</text>
									</view>
								</view>
								<view class="flex-row" v-if="item.xyh_open == '1'">
									<view class="xyh">新</view>
									<view class="gobyndsingle">新用户下单立减{{ item.xyh_money }}元</view>
								</view>
							</view>
							<view class="sjright4-r flex-grow-0">
								<image :class="'sjright4-rimg ' + (item.open ? 'show' : 'close')"
									src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/down.png"></image>
							</view>
						</view>
					</view>
				</view>
				<view class="jzz" v-if="!mygd">
					<image class="Rotation" src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/jzz.png"></image>
					<view>加载中...</view>
				</view>
				<view class="kong" v-if="storelist.length == 0 && mygd">
					<image src="https://yunkeososyunchuc.bc8t.cn/ymq_canyino2o/static/wushuju.png"></image>
					<view>暂无相关数据</view>
				</view>
				<view class="jzwb" v-if="mygd">
					<view class="hx"></view>
					<view class="wz">加载完毕</view>
					<view class="hx"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import cardlist from '@/ymq_canyino2o/dist/cardlist/index';
	import gettel from '@/ymq_canyino2o/dist/gettel/index';
	var qqmapsdk;
	var app = getApp();
	var QQMapWX = require('../../utils/qqmap-wx-jssdk.js');
	export default {
		components: {
			cardlist,
			gettel
		},
		data() {
			return {
				top: 0,
				characteristicList: [{
						text: '0配送费'
					},
					{
						text: '0元起送'
					}
				],

				sortList: [{
						sort: '综合排序',
						image: ''
					},
					{
						sort: '销量最高',
						image: ''
					},
					{
						sort: '起送价最低',
						image: ''
					},
					{
						sort: '配送费最低',
						image: ''
					}
				],

				discountList: [{
						icon: '减',
						iconColor: '#FF635B',
						text: '满减优惠',
						zdname: ' and d.money is not null'
					},
					{
						icon: '新',
						iconColor: '#34aaff',
						text: '新用户立减',
						zdname: ' and c.xyh_open=1'
					},
					{
						icon: '提',
						iconColor: '#6FDF64',
						text: '到店自提',
						zdname: ' and c.is_zt=1'
					}
				],

				categoryList: {
					pageone: [{
							name: '美食',
							src: '/static/pages/images/1.png'
						},
						{
							name: '甜点饮品',
							src: '/static/pages/images/2.png'
						},
						{
							name: '美团超市',
							src: '/static/pages/images/3.png'
						},
						{
							name: '正餐精选',
							src: '/static/pages/images/4.png'
						},
						{
							name: '生鲜果蔬',
							src: '/static/pages/images/5.png'
						},
						{
							name: '全部商家',
							src: '/static/pages/images/6.png'
						},
						{
							name: '免配送费',
							src: '/static/pages/images/7.png'
						},
						{
							name: '新商家',
							src: '/static/pages/images/8.png'
						}
					],
					pagetwo: [{
							name: '美食',
							src: '/static/pages/images/1.png'
						},
						{
							name: '甜点饮品',
							src: '/static/pages/images/2.png'
						},
						{
							name: '美团超市',
							src: '/static/pages/images/3.png'
						},
						{
							name: '正餐精选',
							src: '/static/pages/images/4.png'
						},
						{
							name: '生鲜果蔬',
							src: '/static/pages/images/5.png'
						},
						{
							name: '全部商家',
							src: '/static/pages/images/6.png'
						},
						{
							name: '免配送费',
							src: '/static/pages/images/7.png'
						},
						{
							name: '新商家',
							src: '/static/pages/images/8.png'
						}
					]
				},

				params: {
					nopsf: 2,
					nostart: 2,
					yhhd: ''
				},

				issx: false,
				selected: 0,
				mask1Hidden: true,
				mask2Hidden: true,
				animationData: '',
				location: '',
				characteristicSelected: [false, false],
				discountSelected: null,
				selectedNumb: 0,
				sortSelected: '综合排序',
				pagenum: 1,
				storelist: [],
				bfstorelist: [],
				mygd: false,
				jzgd: true,
				isjzz: true,

				mdxx: {
					isyykg: 0
				},


				sortSelectedXX: '综合排序',
				NaN: '',

				i: {
					full: '',
					reduction: ''
				}
			};
		},
		onLoad: function(t) {
			app.globalData.setNavigationBarColor(this);
			console.log(t);
			uni.setNavigationBarTitle({
				title: t.typename
			});
			var that = this;
			var s = this.params;
			s.type_id = t.type_id;
			that.setData({
				params: s
			});
			app.globalData.util.request({
				url: 'entry/wxapp/system',
				cachetime: '0',
				success: function(t) {
					console.log(t);
					qqmapsdk = new QQMapWX({
						key: t.data.map_key
					});
					that.setData({
						mdxx: t.data
					});
					that.dwreLoad();
					uni.setStorageSync('bqxx', t.data);
				}
			});
		},
		onPageScroll: function(t) {},
		onReady: function() {},
		onShow: function() {
			this.top = uni.getSystemInfoSync().statusBarHeight + 44;
		},
		onHide: function() {},
		onUnload: function() {},
		onPullDownRefresh: function() {
			this.setData({
				issx: false,
				selected: 0,
				mask1Hidden: true,
				mask2Hidden: true,
				animationData: '',
				location: '',
				characteristicSelected: [false, false],
				discountSelected: null,
				selectedNumb: 0,
				sortSelected: '综合排序',
				params: {
					nopsf: 2,
					nostart: 2,
					yhhd: ''
				},
				pagenum: 1,
				storelist: [],
				bfstorelist: [],
				mygd: false,
				jzgd: true
			});
			console.log('下拉刷新', this.pagenum);
			if (this.jzgd) {
				this.setData({
					jzgd: false
				});
				this.dwreLoad();
			}
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			console.log('上拉加载', this.pagenum);
			this.mygd ||
				!this.jzgd ||
				this.isjzz ||
				(this.setData({
						jzgd: false
					}),
					this.getstorelist());
		},
		methods: {
			leftClick() {
				uni.navigateBack(-1)
			},
			onTapTag: function(t) {
				var e = this.params;
				if ('1' == t.currentTarget.dataset.index) {
					e.by = 'juli asc';
				}
				if ('2' == t.currentTarget.dataset.index) {
					e.by = 'sales desc';
				}
				console.log(e, t.currentTarget.dataset.index);
				this.setData({
					sortSelected: this.sortList[0].sort,
					selected: t.currentTarget.dataset.index,
					params: e,
					pagenum: 1,
					storelist: [],
					bfstorelist: [],
					mygd: false,
					jzgd: true
				});
				this.getstorelist();
			},

			sortSelectedFun: function(t) {
				var e = this.params;
				if ('0' == t.currentTarget.dataset.sortindex) {
					e.by = 'number asc';
				}
				if ('1' == t.currentTarget.dataset.sortindex) {
					e.by = 'score desc';
				}
				if ('2' == t.currentTarget.dataset.sortindex) {
					e.by = 'start_at asc';
				}
				if ('3' == t.currentTarget.dataset.sortindex) {
					e.by = 'ps_money asc';
				}
				console.log(e, t.currentTarget.dataset.index, t.currentTarget.dataset.sortindex + 1);
				this.setData({
					selected: t.currentTarget.dataset.index,
					sortSelectedXX: this.sortList[t.currentTarget.dataset.sortindex].sort,
					params: e,
					pagenum: 1,
					storelist: [],
					bfstorelist: [],
					mygd: false,
					jzgd: true
				});
				this.getstorelist();
			},

			finish: function() {
				var t = this.params;
				var e = this.characteristicSelected;
				var a = this.characteristicList;
				var s = this.discountSelected;
				this.setData({
					issx: true
				});
				for (var n = 0; n < e.length; n++) {
					if (e[n]) {
						if ('0配送费' == a[n].text) {
							t.nopsf = 1;
						}
						if ('0元起送' == a[n].text) {
							t.nostart = 1;
						}
					}
				}
				if (null != s) {
					t.yhhd = this.discountList[s].zdname;
				} else {
					t.yhhd = '';
				}
				this.setData({
					params: t,
					pagenum: 1,
					storelist: [],
					bfstorelist: [],
					mygd: false,
					jzgd: true
				});
				this.getstorelist();
				console.log(t, this.issx, e, a, s);
			},

			clearSelectedNumb: function() {
				var t = this.params;
				t.nopsf = 2;
				t.nostart = 2;
				t.yhhd = '';
				this.setData({
					characteristicSelected: [false],
					discountSelected: null,
					selectedNumb: 0,
					issx: false,
					params: t,
					pagenum: 1,
					storelist: [],
					bfstorelist: [],
					mygd: false,
					jzgd: true
				});
				this.getstorelist();
			},

			characteristicSelectedFun: function(t) {
				var e = this.characteristicSelected;
				e[t.currentTarget.dataset.index] = !e[t.currentTarget.dataset.index];
				this.setData({
					characteristicSelected: e,
					selectedNumb: this.selectedNumb + (e[t.currentTarget.dataset.index] ? 1 : -1)
				});
				console.log(e, t.currentTarget.dataset.index, t.currentTarget.dataset.name);
			},

			discountSelectedFun: function(t) {
				if (this.discountSelected != t.currentTarget.dataset.index) {
					this.setData({
						discountSelected: t.currentTarget.dataset.index,
						selectedNumb: this.selectedNumb + (null == this.discountSelected ? 1 : 0)
					});
				} else {
					this.setData({
						discountSelected: null,
						selectedNumb: this.selectedNumb - 1
					});
				}
			},

			mask1Cancel: function() {
				this.setData({
					mask1Hidden: true
				});
			},

			mask2Cancel: function() {
				this.setData({
					mask2Hidden: true
				});
			},

			onOverallTag: function(t) {
				// console.log(t);
				// this.setData({
				// 	mask1Hidden: false
				// });
				this.mask2Hidden = true
				this.mask1Hidden = !this.mask1Hidden
			},

			onFilter: function() {
				// this.setData({
				// 	mask2Hidden: false
				// });
				this.mask1Hidden = true
				this.mask2Hidden = !this.mask2Hidden
			},

			hddb: function() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 1000
				});
			},

			dwreLoad: function() {
				var that = this;
				var n = this.params;
				uni.getLocation({
					type: 'wgs84',
					success: function(t) {
						var e = t.latitude;
						var a = t.longitude;
						n.lat = e;
						n.lng = a;
						that.setData({
							params: n
						});
						that.getstorelist();
					},
					fail: function() {
						uni.getSetting({
							success: function(t) {
								console.log(t);
								if (0 == t.authSetting['scope.userLocation']) {
									uni.showModal({
										title: '提示',
										content: '您点击了拒绝授权,无法正常使用功能，点击确定重新获取授权。',
										showCancel: false,
										success: function(t) {
											if (t.confirm) {
												console.log('用户点击确定');
												uni.openSetting({
													success: function(t) {
														t.authSetting['scope.userLocation'];
														that.dwreLoad();
													}
												});
											}
										}
									});
								}
							}
						});
					},
					complete: function(t) {}
				});
			},

			getstorelist: function() {
				var that = this;
				var i = that.pagenum;
				that.params.page = i;
				that.params.pagesize = 10;
				console.log(i, that.params);
				that.setData({
					isjzz: true
				});
				app.globalData.util.request({
					url: 'entry/wxapp/StoreList',
					cachetime: '0',
					data: that.params,
					success: function(t) {
						console.log('分页返回的商家列表数据', t.data);
						if (t.data.length < 10) {
							that.setData({
								mygd: true,
								jzgd: true,
								isjzz: false
							});
						} else {
							that.setData({
								jzgd: true,
								pagenum: i + 1,
								isjzz: false
							});
						}
						var e = that.bfstorelist;
						e = (function(t) {
							for (var e = [], a = 0; a < t.length; a++) {
								if (-1 == e.indexOf(t[a])) {
									e.push(t[a]);
								}
							}
							return e;
						})((e = e.concat(t.data)));
						for (var a = 0; a < t.data.length; a++) {
							if ('0.0' == t.data[a].sales) {
								t.data[a].sales = '5.0';
							}
							var s = parseFloat(t.data[a].juli);
							console.log(s);
							console.log();
							if (s < 1000) {
								t.data[a].aa = s + 'm';
							} else {
								t.data[a].aa = (s / 1000).toFixed(2) + 'km';
							}
							t.data[a].aa1 = s;
							that.setData({
								storelist: e,
								bfstorelist: e
							});
						}
						console.log(e);
					}
				});
			},

			tzsjxq: function(t) {
				console.log(t.currentTarget.dataset.sjid, this.mdxx);
				if ('1' == this.mdxx.is_tzms) {
					getApp().globalData.sjid = t.currentTarget.dataset.sjid;
					uni.navigateTo({
						url: '/ymq_canyino2o/pages/seller/index'
					});
				} else {
					uni.navigateTo({
						url: '/ymq_canyino2o/pages/takeout/takeoutindex?storeid=' + t.currentTarget.dataset.sjid
					});
				}
			}
		}
	};
</script>
<style>
	@import './spfl.css';
</style>
<style lang="scss" scoped>
	.main {
		background: #F8F7F7;

		.sort {
			border: none;
			color: #1B1717;
		}

		.sjlb {
			background: #fff;
			box-sizing: border-box;
			width: calc(100% - 40rpx);
			margin: 0 auto 28rpx;
			box-shadow: 0rpx 1rpx 13rpx 0rpx rgba(230, 228, 228, 0.35);
			border-radius: 10rpx;

			.sjright2-text {
				color: #469BF6;
				border: 1px solid #6ab1fc;
				background: none;
				padding: 5rpx 6rpx;
				font-size: 20rpx;
				margin-right: 6rpx;
			}
		}
	}
</style>